<template>
	<div>
		<!-- 复制模板 -->
		<div>
			从
			<el-select v-model="selectedOption" placeholder size="mini">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-button type="primary" size="mini" @click>复制</el-button>
		</div>

		<!-- 布局选项 -->
		<el-row type="flex" justify="space-between">
			<!-- 布局方式 -->
			<span>
				布局：
				<el-radio-group v-model="layoutData.value.type" size="mini">
					<el-radio-button :label="0">
						<i class="el-icon-s-fold"></i>
					</el-radio-button>
					<el-radio-button :label="1">
						<i class="el-icon-menu"></i>
					</el-radio-button>
				</el-radio-group>
			</span>

			<!-- 位置偏向 -->
			<span>
				偏向：
				<el-radio-group v-model="layoutData.value.toRight" size="mini">
					<el-radio-button :label="false">左</el-radio-button>
					<el-radio-button :label="true">右</el-radio-button>
				</el-radio-group>
			</span>

			<!-- 是否上下铺 -->
			<span>
				上下铺：
				<el-switch v-model="layoutData.value.withUpper" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
			</span>
		</el-row>
	</div>
</template>

<script>
	class Layout {
		constructor(value = 21) {
			if (typeof value === "number") {
				this.value = {};
				this.value.type = +!(value % 2);
				this.value.toRight = !(parseInt(value / 4) % 2);
				this.value.withUpper = !(parseInt(value / 16) % 2);
			} else {
				this.value = value;
			}
		}

		toString() {
			const keys = ["type", "toRight", "withUpper"];
			return keys.map(k => this.value[k]).join("|");
		}
	}

	export default {
		name: "cc-panel-beds",
		props: {
			layout: [Object, Number],
			options: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				selectedOption: null,
				layoutData: {}
			};
		},
		created() {
			this.layoutData = new Layout(this.layout);
		},
		methods: {}
	};
</script>

<style lang="less" scoped>
	.el-slider {
		width: 100px;
		margin: 0 16px 0 8px;
	}
</style>
